<!--
 * @Author: your name
 * @Date: 2021-10-06 16:14:11
 * @LastEditTime: 2021-10-06 19:09:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\functionPage\workbench\index.vue
-->
<template>
    <Card class="timeline">
        <template #title>
            <div class="timetitle">
                <div>项目管理</div>
                <div>
                    <Tag color="pink"> 最后更新于2021/9/5 </Tag>
                </div>
            </div>
        </template>
        <div class="gridContent">
            <div v-for="(item, index) in arrs" :key="index" class="grid_item">
                <div class="grid_item_logo">
                    <img :src="item.logo" alt="头像" />
                </div>
                <div class="grid_item_info">
                    <div class="title">
                        <div>
                            {{ item.name }}
                        </div>
                        <div>
                            {{ item.type }}
                        </div>
                    </div>
                    <div class="direct">
                        {{ item.direct }}
                    </div>
                </div>
            </div>
        </div>
    </Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Card, Row, Col } from 'ant-design-vue'
import imgs from '../../../../../assets/image/use.png'

export default defineComponent({
    name: 'Workbench',
    components: {
        Card,
        Row,
        Col,
    },
    setup() {
        let arrs = [
            {
                logo: imgs,
                direct:
          '未来主流，移动开发的重心，App方向的倾斜,必定给前端行业带来另一个高峰。',
                name: 'HTML5',
                type: '前端组',
            },
            {
                logo: imgs,
                direct: 'CSS最新标准，FLASH的继承者,炫酷样式的缔造者。',
                name: 'CSS3',
                type: '前端组',
            },
            {
                logo: imgs,
                direct:
          '不忘初心，成事之根本，房之基，树之根。始终不能放弃学习的根本，虽然现在环境很混乱，但是，不会放弃原生。',
                name: 'JavaScript',
                type: '前端组',
            },
            {
                logo: imgs,
                direct:
          'JavaScript的坚盔厉甲，掌握了它，如虎添翼。短期目标，JavaScript规范开发首选',
                name: 'TypeScript',
                type: '前端组',
            },
            {
                logo: imgs,
                direct:
          '优秀js的渐进式框架,前端的尖兵利器，不是很难掌握，但却是必须精通迈向高级的必经之路。',
                name: 'VUE',
                type: '前端组',
            },
            {
                logo: imgs,
                direct:
          '引领前端打包潮流,所谓的前端优秀打包工具，在这个复杂的开发时代，webpack让一切变得简单。',
                name: 'Webpack',
                type: '前端组',
            },
            {
                logo: imgs,
                direct: '堪称针尖上的舞蹈，极客的产物，上手快，轻量又高效。',
                name: 'Node.js',
                type: '前端组',
            },
            {
                logo: imgs,
                direct:
          '高性能、易部署、易使用，存储数据非常方便，与NodeJS配合堪称青梅竹马。',
                name: 'MongoDb',
                type: '前端组',
            },
            {
                logo: imgs,
                direct:
          '高性能、易部署、易使用，存储数据非常方便，与NodeJS配合堪称青梅竹马。',
                name: 'UniApp',
                type: '前端组',
            },
        ]
        return {
            arrs,
        }
    },
})
</script>

<style lang="less" scoped>
.timeline {
  height: 100%;
  .timetitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > div {
      font-size: 12px;
      color: #666;
    }
  }
  .gridContent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .grid {
      &_item {
        display: flex;
        align-items: center;
        flex: 1;
        flex-basis: 300px;
        padding: 28px 8px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
        transition: all 0.2s ease-in 0s;
        cursor: pointer;
        &:hover {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
        }
        &_logo {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          padding: 3px;
          box-sizing: border-box;
          //     border:1px solid #ccc;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &_info {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 0 5px;
          & > div {
            &:nth-of-type(1) {
              display: flex;
              justify-content: space-between;
              font-weight: 600;
              margin-bottom: 5px;
            }
            &:nth-of-type(2) {
              font-size: 12px;
              font-weight: 100;
              text-align: justify;
            }
          }
        }
      }
    }
  }
}
</style>
